import React, { PureComponent } from 'react'
import { TopicWrapper, TopicItem, MoreTopic } from "../style"
import { connect } from 'react-redux'
// import {} from "../store"

class Topic extends PureComponent {
    render() {
        return (
            <TopicWrapper>

                {
                    this.props.topicList.map((item) => (
                        <TopicItem key={item.get('title')}>
                            <img className="topic_img" alt="sss" src={item.get('imgUrl')}></img>
                            {item.get('title')}
                        </TopicItem>
                    ))
                }
                <TopicItem>
                    <img className="topic_img" alt="sss" src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"></img>
                    社会热点
                </TopicItem>


                <MoreTopic>
                    更多热门主题>>
                </MoreTopic>
            </TopicWrapper>
        )
    }
}

const mapState = (state) => ({
    topicList: state.getIn(["home", "topicList"])
})
// const mapMethods = () => {
//     return (dispatch) => {

//     }
// }
export default connect(mapState, null)(Topic)
